<template>
    <div :id="chartsId" class="my-chart"></div>
</template>
<style lang="scss" scoped>
.my-chart{
	width: 900px;
	height: 700px;
	margin: 50px auto 0;
}
</style>

<script>
require('echarts/map/js/china');
export default {
  props: ['chartsId', 'data', 'keyName'],
  data(){
      return {}
  },
  mounted(){
      this.desc();
  },
  watch: {
      data: function(){
          this.desc();
      }
  },
  methods:{
      desc(){
        let myData = this.data.dataList;
				let time = this.data.date;
				console.log('time: ', time);
        let myChart4 = this.$echarts.init(document.getElementById(this.chartsId));
        myChart4.setOption({
						timeline: {
								axisType: 'category',
								autoPlay: false,
								playInterval: 2000,
								currentIndex: time.length - 4,
								data: function(){
											let arr = [];
											for(let i = 0; i < time.length; i++){
												arr.push(time[time.length - 1 - i]);
											}
											return arr
										}(),
								label: {
										data: function(){
											let arr = [];
											for(let i = 0; i < time.length; i++){
												arr.push(time[time.length - 1 - i]);
											}
											return arr
										}()
								}
						},
						baseOption: {
							title: {
									text: this.keyName,
									left: 'center'
							},
							tooltip: {
									trigger: 'item'
							},
							visualMap: {
									min: 0,
									max: 60000,
									left: 'right',
									top: 'top',
									text: ['高','低'],           // 文本，默认为数值文本
									calculable: true,
									inRange: {
											color: ['#eee', '#6ba7e4'],
									},
									outOfRange: {
											color: '#333'
									},
									controller: {
											inRange:{}
									}
							},
							series: [
									{
											name: '汽车销量图',
											type: 'map',
											mapType: 'china',
											roam: false,
											label: {
													normal: {
															show: true
													},
													emphasis: {
															show: true
													}
											},
											itemStyle: {
													emphasis: {
															areaColor: '#389BB7'
													}
											},
											data:myData
									}
							],
						},
						// options: [
						// 	{series:{data: myData}},
						// 	{series:{data: myData1}},
						// 	{series:{data: myData2}},
						// ],
						options: function(){
							let arr = [];
							for(let i = 0; i < myData.length; i++){
								let obj = {};
								obj.series = {
									data: myData[i]
								}
								arr.unshift(obj);
							}
							return arr;
						}()
        });
				myChart4.setOption({})
      }
  }
}
</script>
